"Necesito añadir una imagen al pie de los post donde tenemos el nombre del autor pero en el lado contrario  como si fuera una firma es para añadir la marca de la web"

Nunca había pensado en ese detalle de añadir una imagen a modo de sello personal.
Pensé que se podía probar como hicimos hace tiempo añadiendo una imagen de fondo y borde en el post-footer así que manos a la obra porque es muy sencillo.
En una plantilla sin modificar los estilos del post-footer serían más o menos así:

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
A esos estilos añadiremos lo siguiente.

padding:36px 4px 2px 4px;
background: url(ur-de-la-imagen) no-repeat top right;}

Nos quedaría algo así:

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
padding:36px 4px 2px 4px;
background: url(ur-de-la-imagen) no-repeat top right;}
}

Dependiendo el tamaño de la imagen podemos darle más altura en padding modificando 36px por otro valor.




Alba

hey luce muy bien :D ...saludos

Responder
Toi

Muy bueno, voy a probarlo a ver si me sale...
Gracias
Un b7

Responder
Toi

No me sale , k burra soy jolin...
Jo

Responder
Motoramica | Historia del Motor

Buenísimo Gema! voy a aplicarlo cuando tenga tiempito.
Otra cosa: ¿Se puede poner una imagen al post completo? es decir "una marca de agua que ocupe todo la entrada?

Gracias Gema!

Responder
Deybi

Hola Gem@.

Mira que sencillo ha resultado esto. A la primera creía que ibas a hablar de cosas complicadas, como esa expansión de artilugios, que al final son medio complicaos.

¡Saludos cafeteros!.

Responder
Gem@

yz Me alegra que te guste Alba :)

yz Toi ¿decías algo que eres no se qué...?
Me voy a enfadar si dices eso, no lo veo en tu blog , añádelo y me dices en qué blog está puesto ;)

yz Retro Icon si se puede añadir una imagen de fondo en los post, y lo puedes hacer con CSS para que el cambio se produzca en todos los post o en alguno en particular con HTML.
El tipo de imagen ya depende de la que deseas añadir.
Mira aquí

yz Saludos Deybi, con CSS hay cosas muy sencillas que no caes en la cuenta hasta que las preguntan :)

Responder
Grandes Sabores Serv. de Banqueteria y Productora de Eventos

Muy buena idea, especialmente para mi ahora que estoy en campaña de personalizar comentarios

PD: Gem@, quedaron super los cambios en tu foot

Responder
Admin

Que buena idea gemit@!! Te acordás cuando adornamos los blogs para Navidad? Habíamos puesto una imagen de campanitas y otras cosas en ese sitio, que trabajo nos dio... :D Y mirá que simple que era ;)
Ya te lo dije por Twitter pero te lo repito, hermoso quedó tu footer, muy fino y elegante, el mío está muy recargado aunque voy tratando de sacarle cosas cada vez que puedo pero es que a veces me parece que todo lo necesito ja jaa :D
No solo el footer está precioso sino todo el blog, el tuyo, claro ja ja
Voy a ver si tengo tiempo un día de estos y me pongo a cambiar el mío que ya me está aburriendo.
Besitos amiga querida ;)

Responder
Gem@

yz Me alegra que te guste Giovanna :)

yz Hola k_nelita :)
¿Viste? lo que no aprende una en un año lo aprende en un día, la de vueltas que dimos con las campaillas jajajaja pero lo pasamos muy bien y nos reímos mucho.
No está mal el fotter, pero algo no me termina de gustar y no sé lo que es, ya sabes como soy que como algo no entre a la primera le doy mil vueltas.
Me alegra mucho verte amiga ¿el ordenador sigue siempre ocupado o sigues viajando con frecuencia? se hace extraño no verte con la frecuencia que me gustaría ;)

Responder
Admin

Ja ja, si, el ordenador sigue demasiado ocupado para mi gusto, estos chicos que no se van nunca...
Pero también viajo con frecuencia ;)Mi vida está demasiado desorganizada ultimamente, no se si para bien o para mal ja ja :D
A mi también me gustaría andar con mas frecuencia por aquí :(
Te extraño muchoooo, te quiero gemit@!!
Besotes ;)

Responder
Gem@

yz Está bien eso de viajar :) seguro que es para bien. Yo también te quiero mucho amiga :))
Cuídate ¿ok? besotes !!

Responder
Anónimo

Hola! Buscando ayuda para mi blog y gracias a Rosa y su Escaparate llegué a vos. Me gusta ésto de la imagen al pie del post, pero tengo un pequeño problema: Yo usaba una firma con una imagen al final de mis posts. Cuando agregué la leyenda: Leer más... todo aquel que entra a mi blog ve a la izquierda del post la firma con la imagen. No así cuando da click en Leer más y el post se extiende, ahí se ve normal. Cómo puedo hacer para mantener el Leer más pero que no aparezca repetida la imagen antes de comenzar a leerlo? Uf! qué lío de palabras; espero haberme sabido explicar. Te mando un abrazo y desde ya mis gracias totales!!!! Tal vez puedas darte una vuelta por mi blog para entenderme mejor y hasta para hacerme alguna crítica constructiva, la voy a aceptar con mucho gusto y muy agradecida.

Responder
Gem@

yz "Una argentina más" no sé como ayudarte porque la imagen ya no la tienes, pero creo que todo el problema se debe a los post resumidos.
Tendría que saber como añadiste esa imagen y verlo :(

Responder
kb wrestling

(wwe)

Responder
Josep

Hola Gem@:

En el caso de la página principal con los posts resumidos, ¿como podría hacerse para evitar la imagen en cada resumen? Porque queda feísimo y sería bonito que apareciera la firma sólo al leerse el post entero.

Gracias anticipadas por tu respuesta, se pueda o no.

Responder
Chic@s

Hola Gema, ¿se pueden incluir imagenes tipo iconos pequeños o emoticones en medio del texto de una entrada? Lo ví hace algún tiempo en un blog pero ahora no recuerdo en cual. Soy administradora de un blog en el que escriben niños de primaria y me gustaría ponerles alguna carita feliz o alguna chorradilla que les motivara en medio de sus entradas :)
Por cierto, si quieres verlo http://chicostic.blogspot.com/
Lo empezaron hace dos días y llevan un ritmo...
Besos

Responder
Gem@

yz Saludos Chic@s en la siguiente url verás como añadir emoticones en las entradas y comentarios :D

http://gemablog-.blogspot.com/2007/06/emoticones-segn-daleclikc.html

Responder
Chic@s

Gracias Gema. Ya los tenemos a pleno rendimiento.
Ahora todo son caritas por todas partes.
Un abrazo de mis chi@s

Responder
Gem@

yz Gracias Chic@s :)

Responder
Mamá

Te agradezco infinitamente el aporte, me vino de 10 y explicas mas claro imposible :)

Responder
Gem@

:: Me alegra mucho Celes :D

Responder
rc

Excelente blog, :):):):):):)

Responder
Gem@

:: Gracias rc :D

Responder
COKEXPRO

VALE VALE PERRIN GRACIAS!!!!

Responder
Unknown

Esto funciona en plantillas de Blogger?
Por que segui los pasos que me indica y no funciono.

Responder
Gem@

:: Todo lo que está en el blog es para Blogger Julio.
Algunas (muy poquitas ) son para las plantillas clásicas de Blogger pero si has encontrado en tu plantilla los estilos para el post-footer la tuya no es clásica y estos cambios deberían funcionar.
Si me indicas el blog donde está añadido miro donde está el problema.

Responder
Administradora

Hola,
Antes que nada,gracias por enseñarnos otro truco. Sin embargo, al copiar el código de este, la imagen me aparece tanto al final de la entrada,como al principio....qué puedo estar haciendo mal?
Desde ya,gracias

Responder
Gem@

:: Puede ser que se haya omitido algo como por ejemplo "no-repeat top right" eso hace que la imagen no se repita y se sitúe en la parte inferior derecha.
Tendría que ver un ejemplo añadido :

Responder
Administradora

antes que nada, gracias Gema.
Te copio el código tal cual lo puse; y está el no-repeat:
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
padding:36px 4px 2px 4px;
background: url(http://img230.imageshack.us/img230/1576/anteojosazules.jpg) no-repeat top right;}
}

Pero además de eso, se me copia,debajo del titulo de la entrada,a la derecha....Será algo del header=?;porque copié el mismo codigo,en otro blog,y se ve perfectamente.
Desde ya,gracias

Responder
Gem@

:: Yo he probado y el ejemplo está bien, como te decía tendría que verlo añadido para saber donde está el error.
Si no quieres añadirlo porque no queda bien utiliza la misma plantilla en un blog de pruebas.

Responder
Administradora

Copié todo el blog en uno que tengo para probar cosas;
http://nataliaoreiroblogoficial.blogspot.com/?zx=1230e309f6c31380

Gracias!!!

Responder
Gem@

:: El problema si no me equivoco es que hay entradas sin contenido, vamos a hacer una cosa.
Da salida a un par de entradas con título y un breve texto de contenido. Que sean iguales las dos.
Así vemos si el problema está en lo que añades a las entradas, en la forma de crearlas o en algún problema del footer.

Responder
Administradora

Ahora pruebo,
Millón de gracias!!!

Responder
Unknown

Gracias Gem@ me funciono de lo mas bien, tenia problemas con la url de la imagen, pero luego todo quedo resuelto.
Una cosa, la imagen me sale siempre al principio de la entrada resumida, no podria ocultarse para que salga en la entrada completa?

Responder
Gem@

:: Saludos Julio Palen no sé si es en el blog que hay en tu perfil pero el que yo he visto no tiene todas las entradas resumidas, de todas formas la imagen está añadida en el pos-footer y este siempre está visible, para que se mostrara sólo en la entrada completa sería necesario añadirla después del post-footer.

Responder
Maria

hola Gema!!!!

Estoy alucinando con tu blog,ya me he llevado pa'l mio varias cosillas ;),pero este de la firma q es el q mas me interesaba no puedo...es q no se donde tengo ese codigo en la plantilla :(¿Me ayudarias si te doy mi blog? o si quieres te hago una copia de mi plantilla?
De todas maneras,te mando un e-mail por si me pudieras ayudar por ahi,

acostagarciamaria99@gmail.com,este es el mio por si vieras el msj.

y Este mi blog

http://mivozdelcorazonenpalabras.blogspot.com/

Muchas gracias de antemano y muchas felicidades por tan genial blog,pa' todos los q estamos andando en este mundo.

Un saludo

Responder
Gem@

:: Lo tienes al principio de la plantilla María dice algo así:
.post-footer { margin: 0; padding-left: 10px; padding-top: 0px; padding-bottom: 20px; font-size: 100%; color:#000000; }

Responder
blogpruebas

Buen blog ,me podrias ayudar en esto, como hacer que un link valla directamente a una parte de un parrafo escrito en mi blog , se como poner link y te mandan hasta arriva de la pagina, pero quisiera saber como lo mando directamente a la parte que quiero :)


http://futbolmuycaliente.blogspot.com/

Responder
Gem@

:: Puede ser algo así:
http://gemablog-.blogspot.com/2008/04/redireccionar-dentro-de-un-post.html :)

Responder
EpideMia

hola gema!!!!
entro tantas veces a tu blog que ya siento que te conozco.


mas arriba josep te preguntaba si hay alguna forma de evitar que la firma aparezca en los post resumidos. imagino que será con algun condicional o algo por el estilo, pero yo tengo la misma duda.

es posible hacer eso??

Responder
Inés

Hago lo que dices, pero no aparece la imagen. ¿Dónde puede estar el fallo? gracias

Responder
Gem@

:: EpideMia tendría que probar antes de decirte la forma de ocultar esa imagen, no me di cuenta del comentario de Josep y por lo qu eveo optó por añadir la firma en el interior del post y al final de la entrada :)

:: Inés no puedo saber lo que está mal porque no está disponible tu perfil y no puedo verlo :O

Responder
Inés

Gem@ ya he editado mi perfil, échale un vistacillo cuando puedas. Gracias

Responder
Gem@

:: No veo la imagen en tu plantilla Inés, la imagen debe ir en:

.post-footer {
color:#32527A;
text-transform:lowercase;
margin-top:10px;
padding:5px;
border: 1px dotted #919eff;
}

Responder
EpideMia

entonces como podria hacer lo mismo que hizo josep?

Responder
Gem@

:: EpideMia Josep añadió la imagen en las entradas, para eso lo que suele hacerse es añadir el código de la imagen en la %% plantilla de entrada de esa forma aparece automáticamente y nos olvidamos de copiar y pegar cada vez el código.

Otra idea es añadirla dentro del mismo post con CSS y se mostrará al final del post y antes del post-footer de esa forma quedaría oculta en los resumidos sería algo así:

.post-body {
position: relative;
background: url(http://dl.dropbox.com/u/17851544/firma%202.png) no-repeat scroll right bottom transparent ;
}

Responder
Inés

Hola Gem@ esto es lo más parecido que aparece en mi plantilla.
.post-footer {
color:$postTitleColor;
text-transform:none;
margin-top:10px;
padding:5px;
border: 1px dotted $sidebarBgColor;



Se supone que debajo de esto tengo que colocar
padding:36px 4px 2px 4px;
background: url(ur-de-la-imagen) no-repeat top right;}

¿La url de la imagen tiene que tener alguna extensión específica o puedo alojarla en cualquier sitio?
GRACIAS

Responder
Gem@

:: Inés añade sólo la línea de la imagen y luego vemos el espacio que hay que dejar para los márgenes porque depende del tamaño de la imagen.
La url de la imagen es la direción de la imagen y la puedes añadir en una entrada o en Picasa que es donde quedan alojadas las imágenes de Blogger, pero lo más sencillo es en una entrada, copias la url y luego dejas la entrada en borrador ;)

Responder
SMB

Felicidades por el blog se aprende mucho.

He buscado en internet y no encuentro como hacer una faviconera como la tuya....

Ojalá puedas darme un tip

mi blog www.okbasket.com

Responder
Manos Ensangrentadas de Jesús

Hola, Gema,
primero quiero felicitarte por toda la ayuda que nos brindas. Soy de Argentina y nuevo en el tema blogger. Buscando cosas para mi blog, llegué hasta esta joya, que es tu blog.
Bueno, hice todo lo que dices para aparecer la imagen al final de la entrada, pero en mi blog no aparece. Te copio el código.
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;

color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);

line-height: 1.6;
font-size: 90%;
padding:36px 4px 2px 4px;
background: url(http://www.subirimagenes.net/show-image.php?id=0f236c8d402146bc971f4fbce3efd7ed) no-repeat top right;}
}

Veo que hay una diferencia antes de agregar la imagen, no termina en (1.4em;) como el ejemplo que dejaste. Otra cosa, no sé si el problema es la url de la imagen, pero lo probé con 4 url diferentes y cuando pido para ver una nueva publicación en "vista previa" no aparece la imagen.
Te agradezco la ayuda.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top